<template>
  <dv-full-screen-container style="background-color: rgb(0, 0, 0)">
    <dv-border-box-1>
      
      <div style="color: white; text-align: center; font-size: 50px">
        新疆地震平台
      </div>
      <dv-decoration-5 style="width: 300px; height: 40px; margin: 0 auto" />
      <!-- 地图展示 -->
      <div style="width: 1000px; height: 600px; margin: 0 auto">
        <!-- 右上角 -->
        <div
          id="right_top"
          style="height: 300px; width: 400px; background-color: brown"
        ></div>
        <!-- 中间地震详情 -->
        <dv-border-box-12
          title="震情分析"
          style="width: 100%; height: 100%; margin: 0 auto"
        >
          <div style="width: 100%; height: 100%; margin: 0 auto">
            <!-- <div
              id="demo"
              style="width: 100%; height: 100%; margin: 0 auto"
            ></div> -->
          </div>
        </dv-border-box-12>
        <!-- 右中间 -->
        <div
          id="right_mid"
          style="
            height: 300px;
            width: 400px;
            background-color: rgb(99, 42, 165);
          "
        ></div>
        <!-- 右下角 -->
        <div
          id="right_bom"
          style="
            height: 300px;
            width: 400px;
            background-color: rgb(44, 42, 165);
          "
        ></div>
        <!-- 轮播表 -->
        <div style="width: 1000px; height: 250px;">
          <dv-scroll-board
            :config="dzData"
            id="dz"
            style="width: 100%; height: 100%"
          />
        </div>

        <div id="left" style="height: 1000px; width: 400px; background-color: brown"></div>
      </div>
    </dv-border-box-1>

    <!-- <div id="demo"></div> -->
  </dv-full-screen-container>
</template>

<script>
import { loadModules } from "esri-loader";
// import * as echarts from "echarts";
export default {
  name: "App",
  data() {
    return {
      dzData: {},
    };
  },
  created() {
    this.createDZEcharts();
  },
  mounted() {
    // this._createMapView();
  },

  methods: {
    //创建地图
    _createMapView: function () {
      const _self = this; //定义一个_self防止后续操作中this丢失
      const option = {
        //定义一个包含有JS API中js开发包和css样式文件的对象
        url: "https://js.arcgis.com/4.22/",
        css: "https://js.arcgis.com/4.22/esri/themes/light/main.css",
      };

      //通过loadModules来做衔接
      loadModules(
        ["esri/Map", "esri/views/MapView", "esri/layers/FeatureLayer"],
        option
      )
        .then(([Map, MapView, FeatureLayer]) => {
          //业务代码在此处编写
          //自定义底图
          let featureLayer = new FeatureLayer({
            url: "https://gis.bt3s.cn/server/rest/services/earthquake_xj/FeatureServer/0",
          });

          const map = new Map({
            //实例化地图
            basemap: "osm", // 更换底图
          });

          const view = new MapView({
            //实例化地图视图
            container: "demo", // 视图的容器
            map: map, // Map的实例放入视图中
            zoom: 10, // 当前地图缩放等级
            center: [114.31, 30.52], // 初始显示的地图中心点，经纬度
          });
          map.add(featureLayer);
          view.ui.components = []; // 清除掉地图左上角默认的缩放图标
        })
        .catch((err) => {
          _self.$message("地图创建失败" + err);
        });
    },
    createDZEcharts() {
      this.dzData = {
        header: ["列1", "列2", "列3"],
        data: [
          ["行1列1", "行1列2", "行1列3"],
          ["行2列1", "行2列2", "行2列3"],
          ["行3列1", "行3列2", "行3列3"],
          ["行4列1", "行4列2", "行4列3"],
          ["行5列1", "行5列2", "行5列3"],
          ["行6列1", "行6列2", "行6列3"],
          ["行7列1", "行7列2", "行7列3"],
          ["行8列1", "行8列2", "行8列3"],
          ["行9列1", "行9列2", "行9列3"],
          ["行10列1", "行10列2", "行10列3"],
        ],
      };
    },
  },
};
</script>

<style scoped>
#left{
  position: absolute;
  top: 2vh;
  left: 5vh;
}

#right_bom {
  position: absolute;
  top: 68vh;
  right: 5vh;
}

#right_mid {
  position: absolute;
  top: 35vh;
  right: 5vh;
}

#right_top {
  position: absolute;
  top: 2vh;
  right: 5vh;
}

.box1 {
  height: 100%;
  width: 500px;
}

#demo {
  /* height: 650px;
  widows: 100px; */
  height: 100%;
  widows: 100%;
}
</style>
